<!--
  字典组件说明:
    code: 字典类型
    htmlType: 组件使用的html类型目前有(select, tag, radio)
    defaultValue: 渲染的值, 一般用作查询详情时使用; 当value=-1时不设置默认选框
  组件向上传递参数:
    在父组件监听change事件, 处理事件函数入参即是字典组件变更后的值
-->

<template>
  <div>
    <template v-if="htmlType === 'select'">
      <el-select v-model="value" @change="changeValue">
        <el-option
          v-for="item in dicts"
          :key="item.dictValue"
          :label="item.dictKey"
          :value="item.dictValue">
        </el-option>
      </el-select>
    </template>

    <template v-if="htmlType === 'tag'">
      <el-tag
        v-for="item in dicts"
        :key="item.dictValue"
        :type="getTagColor(item.dictValue)"
        v-if="value == item.dictValue"
      > {{ item.dictKey }} </el-tag>
    </template>

    <template v-if="htmlType === 'radio'">
      <el-radio-group v-model="value" @change="changeValue">
        <el-radio
          v-for="item in dicts"
          :key="item.dictValue"
          :label="item.dictValue"
        >{{ item.dictKey }}</el-radio>
      </el-radio-group>
    </template>

  </div>
</template>

<script>
  import {getDict} from '@/api/system/dict'

  export default {
    name: "DictTag",
    data() {
      return {
        dicts: null,
        value: this.showValue
      }
    },
    props: {
      code: {
        type: String,
        default: null
      },
      htmlType: {
        type: String,
        required: true
      },
      showValue: {
        type: String,
        default: ''
      }
    },
    created() {
      this.getDicts();
    },
    methods: {
      getDicts() {
        new Promise(resolve => {
          if (this.getCacheDicts.get(this.code)) {
            // 如果全局变量中(一个临时缓存)有当前字典key则直接从变量中获取
            this.dicts = this.getCacheDicts.get(this.code);
            resolve(this.dicts);
          } else {
            // 没有则调用接口获取
            getDict(this.code).then(response => {
              this.dicts = response.data;
              this.getCacheDicts = this.getCacheDicts.set(this.code, response.data);
              resolve(this.dicts);
            })
          }
        }).then(dictList => {
          // 处理组件页面渲染问题
          if (this.value) {
            // 父组件用以展示数据
            return;
          }
          console.log('dictList', this.htmlType, dictList);
          if (dictList) {
            console.log('ifdictList', this.htmlType, dictList);
            for(let i = 0; i < dictList.size; i++) {
              console.log('if', this.htmlType, dictList[i].isDefault, dictList[i].isDefault == '1', dictList[i], dictList);
              // 这里为 由后台设置默认选项, 用以新增数据的场景
              if (dictList[i].isDefault == '1') {
                this.value = dictList[i].dictValue;
                console.log('value', this.value);
              }
            }
          }
        });
      },
      changeValue(){
        this.$emit('update:showValue', this.value);
      },
      getTagColor(code) {
        if (code == '1') {
          return '';
        }
        if (code == '0') {
          return 'danger';
        }
        return '';
      }
    }

  }

</script>
